<template>
	<div class="adm-page" :class="skin" :style="{backgroundImage: 'url(' + bg + ')'}">
		<Head @getData="getData" />
		<div class="bs-panel">
			<div class="bs-panel_bd">
				<div class="file-grid flex-center">
					<div class="xlogo"><img src="../../assets/images/er/xlogo.png" ></div>
					<div class="flex_bd">
						<div class="file-title">电子科技大学</div>
						<el-row>
							<el-col :span="12">
								<div class="item"><span class="hd">商户编号：</span>JD346433</div>
							</el-col>
							<el-col :span="12">
								<div class="item"><span class="hd">入住时间：</span>2020-10-10</div>
							</el-col>
							<el-col :span="12">
								<div class="item"><span class="hd">联系人：</span>张三</div>
							</el-col>
							<el-col :span="12">
								<div class="item"><span class="hd">商户类别：</span>继续教育</div>
							</el-col>
							<el-col :span="12">
								<div class="item"><span class="hd">联系方式：</span>138****2850</div>
							</el-col>
						</el-row>
						<div class="file-end">
							<el-link type="primary"><img src="../../assets/images/er/set-icon.png" alt=""><span>账号管理</span></el-link>
						</div>
					</div>
					<ul class="file-data">
						<li>
							<div class="icon"><img src="../../assets/images/er/df1.png" ></div>
							<div class="text">视频数量</div>
							<div class="value">56</div>
						</li>
						<li>
							<div class="icon"><img src="../../assets/images/er/df2.png" ></div>
							<div class="text">订单数量</div>
							<div class="value">56</div>
						</li>
						<li>
							<div class="icon"><img src="../../assets/images/er/df3.png" ></div>
							<div class="text">交易金额</div>
							<div class="value">888</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="bs-panel">
			<div class="bs-panel_hd">
				<div class="bs-tt">课程列表</div>
			</div>
			<div class="bs-panel_bd">
				<div class="lesson-main ">
					<el-tabs v-model="activeName" >
						<el-tab-pane label="第一学期" name="first">
							<div class="lesson-scroll">
								<el-scrollbar>
									<div class="lesson-panel flex">
										<div class="flex_bd">
											<div class="les-cells">
												<ul class="lesson-list">
													<li class="flex-center" v-for="(item,index) in lists" :key="index">
														<div class="lesson-info flex-center">
															<div class="pic"><img src="../../assets/images/er/kepic.png" ></div>
															<div class="flex_bd">
																<div class="title">{{item.title}}</div>
																<div class="item">老师：嘉琪</div>
																<div class="item">课时：32</div>
															</div>
														</div>
														<div class="lesson-middle">
															<div class="le-value">8.8w</div>
														</div>
														<div class="lesson-action">
															<el-link type="primary">编辑</el-link><span class="line">丨</span><el-link type="primary">删除</el-link>
														</div>
													</li>
												</ul>
											</div>
										</div>
										
										<div class="le-aside">
											<ul class="le-nav">
												<li @click="dataTab(index)" v-for="(item,index) in letabs" :key="index" :class="leActive == index?'active':''"><el-link >{{item.title}}</el-link></li>
											</ul>
										</div>
									</div>
								</el-scrollbar>
							</div>
						</el-tab-pane>
						<el-tab-pane label="第二学期" name="second">
							<div class="lesson-scroll">
								<el-scrollbar>
									<div class="lesson-panel flex">
										<div class="flex_bd">
											<div class="les-cells">
												<ul class="lesson-list">
													<li class="flex-center" v-for="(item,index) in lists" :key="index">
														<div class="lesson-info flex-center">
															<div class="pic"><img src="../../assets/images/er/kepic.png" ></div>
															<div class="flex_bd">
																<div class="title">{{item.title}}</div>
																<div class="item">老师：嘉琪</div>
																<div class="item">课时：32</div>
															</div>
														</div>
														<div class="lesson-middle">
															<div class="le-value">8.8w</div>
														</div>
														<div class="lesson-action">
															<el-link type="primary">编辑</el-link><span class="line">丨</span><el-link type="primary">删除</el-link>
														</div>
													</li>
												</ul>
											</div>
										</div>
										
										<div class="le-aside">
											<ul class="le-nav">
												<li @click="dataTab(index)" v-for="(item,index) in letabs" :key="index" :class="leActive == index?'active':''"><el-link >{{item.title}}</el-link></li>
											</ul>
										</div>
									</div>
								</el-scrollbar>
							</div>
						</el-tab-pane>
						<el-tab-pane label="第三学期" name="third">
							<div class="lesson-scroll">
								<el-scrollbar>
									<div class="lesson-panel flex">
										<div class="flex_bd">
											<div class="les-cells">
												<ul class="lesson-list">
													<li class="flex-center" v-for="(item,index) in lists" :key="index">
														<div class="lesson-info flex-center">
															<div class="pic"><img src="../../assets/images/er/kepic.png" ></div>
															<div class="flex_bd">
																<div class="title">{{item.title}}</div>
																<div class="item">老师：嘉琪</div>
																<div class="item">课时：32</div>
															</div>
														</div>
														<div class="lesson-middle">
															<div class="le-value">8.8w</div>
														</div>
														<div class="lesson-action">
															<el-link type="primary">编辑</el-link><span class="line">丨</span><el-link type="primary">删除</el-link>
														</div>
													</li>
												</ul>
											</div>
										</div>
										
										<div class="le-aside">
											<ul class="le-nav">
												<li @click="dataTab(index)" v-for="(item,index) in letabs" :key="index" :class="leActive == index?'active':''"><el-link >{{item.title}}</el-link></li>
											</ul>
										</div>
									</div>
								</el-scrollbar>
							</div>
						</el-tab-pane>
						<el-tab-pane label="第四学期" name="fourth">
							<div class="lesson-scroll">
								<el-scrollbar>
									<div class="lesson-panel flex">
										<div class="flex_bd">
											<div class="les-cells">
												<ul class="lesson-list">
													<li class="flex-center" v-for="(item,index) in lists" :key="index">
														<div class="lesson-info flex-center">
															<div class="pic"><img src="../../assets/images/er/kepic.png" ></div>
															<div class="flex_bd">
																<div class="title">{{item.title}}</div>
																<div class="item">老师：嘉琪</div>
																<div class="item">课时：32</div>
															</div>
														</div>
														<div class="lesson-middle">
															<div class="le-value">8.8w</div>
														</div>
														<div class="lesson-action">
															<el-link type="primary">编辑</el-link><span class="line">丨</span><el-link type="primary">删除</el-link>
														</div>
													</li>
												</ul>
											</div>
										</div>
										<div class="le-aside">
											<ul class="le-nav">
												<li @click="dataTab(index)" v-for="(item,index) in letabs" :key="index" :class="leActive == index?'active':''"><el-link >{{item.title}}</el-link></li>
											</ul>
										</div>
									</div>
								</el-scrollbar>
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				activeName: 'first',
				lists: [{
						title: '我是标题我是标题',
					},{
						title: '我是标题我是标题',
					},{
						title: '我是标题我是标题',
					},{
						title: '我是标题我是标题',
					},{
						title: '我是标题我是标题',
					},
				],
				letabs: [{
						title: '动画',
					},{
						title: '汽车',
					},{
						title: '直播',
					},{
						title: '动画',
					},{
						title: '动画',
					},{
						title: '汽车',
					},{
						title: '直播',
					},{
						title: '动画',
					},{
						title: '动画',
					}
				],
				leActive:0,
				bg: require('../../assets/images/bg4.jpg'),
				skin: "skin3"
			}
		},
		mounted() {
		},
		methods: {
			dataTab(index){
				this.leActive = index
			},
			getData(data1, data2) {
				this.bg = data1
				this.skin = data2
			},
		}
	}
</script>
